<template>
  <view class="media-viewer">
    <!-- 图片轮播 -->
    <swiper 
      v-if="type === 'image'" 
      class="image-swiper"
      :indicator-dots="images.length > 1"
      :autoplay="autoplay"
    >
      <swiper-item v-for="(img, index) in images" :key="index">
        <image 
          :src="img" 
          mode="aspectFit" 
          @click="toggleFullscreen"
          class="swiper-image"
        />
        <view class="indicator">{{ index + 1 }}/{{ images.length }}</view>
      </swiper-item>
    </swiper>
    
    <!-- 视频播放 -->
    <video 
      v-else-if="type === 'video'"
      :src="mediaUrl"
      controls
      autoplay
      class="video-player"
      :style="{ height: videoHeight }"
    ></video>
    
    <!-- 全屏按钮 -->
    <view class="fullscreen-btn" @click="toggleFullscreen">
      <uni-icons type="fullscreen" size="24" color="#fff"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    type: String, // 'image' or 'video'
    images: Array,
    mediaUrl: String
  },
  data() {
    return {
      fullscreen: false,
      autoplay: false
    }
  },
  computed: {
    videoHeight() {
      return this.fullscreen ? '100vh' : '60vh'
    }
  },
  methods: {
    toggleFullscreen() {
      this.fullscreen = !this.fullscreen
      if (this.fullscreen) {
        uni.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#000000'
        })
      } else {
        uni.setNavigationBarColor({
          frontColor: '#000000',
          backgroundColor: '#ffffff'
        })
      }
    }
  }
}
</script>

<style scoped>
.media-viewer {
  width: 100%;
  height: 100%;
  position: relative;
}

.image-swiper {
  width: 100%;
  height: 100%;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.indicator {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.video-player {
  width: 100%;
  background: #000;
}

.fullscreen-btn {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
</style>